<template>
	<view class="wrap">
		<div class="header">
			<image style="width: 100%" mode="widthFix" :src="baseInfo.imgs"></image>
		</div>
		<div class="desc">
			<div class="price">
				<span>￥{{ baseInfo.unit_fee }}</span>
				/起
			</div>
			<div class="text">{{ baseInfo.sname }}</div>
			<div class="promise">
				<!-- <u-button type="primary" shape="circle" text="金牌服务"></u-button> -->
				<div class="btn">金牌服务</div>
				<div class="text">质量保证 售后无忧</div>
			</div>
		</div>

		<view class="service" @click="selectionSpecs">
			<view class="title">
				已选
				<span>{{ serviceParams.lvName }} {{ serviceParams.serviceTimeName }}</span>
			</view>
			<u-icon name="arrow-right" color="#666"></u-icon>
		</view>
		<div class="explain">
			<rich-text class="text" :nodes="baseInfo.servicedesc"></rich-text>
		</div>
		<div class="bottom">
			<div class="ai">
				<image style="width: 48rpx; height: 48rpx" @click="jumpService" mode="widthFix" src="/static/kefu.png" @error="imageError"></image>
				联系客服
			</div>
			<u-button type="primary" shape="circle" text="立即购买" @click="selectionSpecs" color="#21B579"></u-button>
		</div>
		<!-- 选择服务 -->
		<u-popup :show="showService" :round="10" mode="bottom" closeable @close="closePopup">
			<SelectService ref="SelectServiceRef" @submitSpecs="submitSpecs" @changeSpecs="changeSpecs" />
		</u-popup>
	</view>
</template>

<script>
import SelectService from './modules/selectService.vue';
export default {
	components: {
		SelectService
	},
	data() {
		return {
			userInfo: '',
			showService: false,
			serviceParams: {},
			specsList: {},
			baseInfo: {}
		};
	},
	onLoad(option) {
		this.getServiceItems();
		this.getUserInfo();
	},
	methods: {
		submitSpecs(params) {
			console.log(params);
			this.serviceParams = params;

			let data = {
				userId: this.userInfo.id,
				serviceId: this.baseInfo.id,
				serviceTime: params.serviceTimeName,
				serviceTimeFees:params.serviceTimeFees,
				totalFee: params.total,
				serviceLv: params.lvName,
				img:this.baseInfo.imgs,
			};
			console.log(data);
			this.showService = false
			uni.navigateTo({
				url: `/pages/orderConfirmService/orderConfirmService?data=${JSON.stringify(data)}`
			});

			// closePopup()
		},
		// 延长服务产品页(新)
		getBaseInfo(id) {
			this.$api.post('/fit/getFitAfterService', { userId: id }).then((res) => {
				console.log(res);
				this.baseInfo = res.data;
			});
		},
		// 选取规格
		selectionSpecs() {
			this.showService = true;
			this.$nextTick(() => {
				this.$refs.SelectServiceRef.getServiceItems({ specsList: this.specsList, serviceParams: this.serviceParams });
			});
		},
		// 获取服务列表 用户选择服务
		getServiceItems() {
			let data = {
				serviceTime: [
					{
						fee: 3,
						name: '3个月',
						id: 1
					},
					{
						fee: 6,
						name: '6个月',
						id: 2
					},
					{
						fee: 9,
						name: '9个月',
						id: 3
					},
					{
						fee: 12,
						name: '12个月',
						id: 4
					},
					{
						fee: 24,
						name: '24个月',
						id: 5
					},
					{
						fee: 36,
						name: '36个月',
						id: 6
					}
				],
				lvs: [
					{
						fee: 100,
						name: '金牌服务',
						id: 1
					},
					{
						fee: 60,
						name: '银牌服务',
						id: 2
					},
					{
						fee: 30,
						name: '铜牌服务',
						id: 3
					}
				]
			};
			this.specsList = data;
			this.serviceParams = {
				serviceTimeId: data.serviceTime[0].id,
				lvId: data.lvs[0].id,
				serviceTimeName: data.serviceTime[0].name,
				lvName: data.lvs[0].name,
				serviceTimeFees: data.serviceTime[0].fee,
				lvFee: data.lvs[0].fee,
				total: data.serviceTime[0].fee * data.lvs[0].fee
			};
			// this.$api.get('/fit/getServiceItems').then((res) => {

			// });
		},
		// 修改规格
		changeSpecs(params) {
			this.serviceParams = params;

			// console.log(data);
		},
		closePopup() {
			this.showService = false;
		},
		jumpService(){
			uni.navigateTo({
				url:'/pages/customerService/customerService'
			})
		},
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					// console.log('用户信息', res);
					that.userInfo = res.data;
					that.getBaseInfo(res.data.id);
				},
				fail(err) {
					uni.redirectTo({
						url: '../login/index'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	margin-bottom: 260rpx;
	.header {
		background: #fff;
		padding: 32rpx;
	}
	.desc {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 32rpx;
		.price {
			color: #999;
			span {
				font-size: 42rpx;
				color: #f55726;
				font-weight: bold;
				display: inline-block;
				margin-right: 5rpx;
			}
		}
		.text {
			font-weight: 500;
			color: #333333;
			line-height: 38rpx;
			padding: 10rpx 0;
			font-size: 32rpx;
		}
		.promise {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.btn {
				width: 108rpx;
				height: 36rpx;
				line-height: 36rpx;
				color: #fff;
				background: #21b579;
				border-radius: 6rpx;
				font-size: 22rpx;
				text-align: center;
			}
			.text {
				font-size: 22rpx;
				color: #666;
				margin-left: 8rpx;
			}
		}
	}
	.service {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 32rpx;
		.title {
			font-size: 28rpx;
			color: #333;
			span {
				color: #21b579;
				padding-left: 20rpx;
			}
		}
	}
	.explain {
		padding: 32rpx;
		font-size: 24rpx;
		.text {
			margin-bottom: 20rpx;
			color: #333;
		}
	}
	
	
	
	
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		background-color: #fff;
		position: fixed;
		// bottom: 88rpx;
		bottom: 0;
		left: 0;
		right: 0;
		.ai {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 18rpx;
			margin-right: 80rpx;
			width: 160rpx;
		}
	}
	
}
</style>
